<template>
  <h2>和为:{{ sum }}</h2>
  <button @click="sum++">点我加一</button>
  <br />
  <h2>{{ msg }}</h2>
  <button @click="msg += '!'">修改</button>
  <br />
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪水:{{ person.job.j1.salary }}K</h2>
  <button @click="person.name += '!'">改名</button>
  <button @click="person.age++">增寿</button>
  <button @click="person.job.j1.salary++">加薪</button>
</template>

<script>
import { reactive, ref, watch } from "vue";
export default {
  name: "Demo",
  beforeCreate() {},

  setup(props, context) {
    let sum = ref(0);
    let msg = ref("你好啊");
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    // 1. 监视ref定义的一个响应式数据
    /* watch(sum,(newValue,oldValue)=>{
      console.log(`sum变了`)
    },{immediate:true,deep:true}); */
    // 2.监视多个
    /* watch([sum,msg],()=>{
        console.log(`sum或msg变了`)
    }); */
    /**
     * 3. 监视reactive定义的响应式数据 不能正确的获取oldValue
     * 强制开启deep 不能关
     */
    /* watch(person, (newValue, oldValue) => {
      console.log(newValue, oldValue);
    }); */

    //4 监视reactive定义的响应式数据中的某个属性
    /* watch(
      () => person.age,
      (newValue, oldValue) => {
        console.log("person的age", newValue, oldValue);
      }
    ); */
    // 5 监视reactive定义的响应式数据中的某些属性
    /* watch(
      () => [person.age,person.name],
      (newValue, oldValue) => {
        console.log("person的age或name", newValue, oldValue);
      }
    ); */

    // 特殊情况
    watch(
      () => person.job,
      (newValue, oldValue) => {
        console.log("person的job", newValue, oldValue);
      },
      {
        deep:true,
      }
    );

    return {
      sum,
      msg,
      person,
    };
  },
};
</script>